Breakpoints | The Cascading Rule | Editor X Tutorials

Hello, design enthusiasts! We're back with another interesting topic that can enhance your design skills and help you make better websites using Editor X. Today, we'll be talking about the *cascading group* and the *cascading rule*. Although simple to understand, some people might still get confused by it. To avoid any confusion, we'll explain the concept and provide a live example of how it works in Editor X.

If you're new here, livelearning.editorx.io is a fantastic platform that provides mentoring on how to build design businesses and further your career. We also offer monthly NoCode Design Challenges with prizes, so don't forget to join our community and get involved!

The Cascading Rule

According to Editorics Academy, the cascading rule states that changes you make to a site layout or style always trickle down to the smaller breakpoint - this means that if you make a change on desktop, it will also be applied to tablet and mobile versions. However, if you make changes on a smaller breakpoint, such as mobile, the desktop version won't be affected.

Now let's dive into Editor X and see how this cascading rule works in action.

Live Example

1. Changing Element Style on Desktop

Suppose we have a text element filed with a title, and we want to change its color to white using the desktop version of Editor X. Start by selecting the text and changing its color to white. Now, when you switch to the tablet and mobile versions, you'll notice that the text color remains white, thanks to the cascading effect.

Remember, changes you make on the desktop version are cascaded down to the smaller breakpoints (tablet and mobile), applying the same styles and formatting.

2. Changing Element Position

Another example could be changing the position of the elements on various devices. Let's say we have a section containing an image stack element and the section itself has a grid with two columns.

If you decide to change the position of these elements using the tablet version of Editor X, follow these steps:

- Go to the tablet breakpoint

- Move the stack element to the second column

- Move the image to the first column

After making these changes on the tablet breakpoint, you will see that the mobile breakpoint has also been affected. However, the desktop version remains unchanged, proving that changes on smaller breakpoints do not affect the larger ones.

What You Can Do with the Cascading Rule

Using the cascading rule in Editor X, you can:

1. Change element styles: Change the style, color, or formatting of text and other elements on your website, as shown in our first example.

2. Change element positions: Rearrange the layout of your website by moving elements around within sections and columns, as demonstrated in the second example.

Final Thoughts

Mastering the cascading rule in Editor X is essential to efficiently create and manage responsive websites that look great on all devices. By understanding this concept, designers can make design changes targeting specific breakpoints, without worrying about unintentionally affecting the layout on larger devices.

Remember to check out livelearning.editorx.io for more design tips, tutorials, and join our community to participate in the monthly NoCode Design Challenges with awesome prizes. Happy designing!